<template>
	<view class="fade">
		<!-- <view class="door"> -->
		
<!-- 			<view class="door">
				
			</view> -->
			
			<view class="content">
				<vertical-selector :items="['猜谜双人赛','猜谜单人赛','猜谜道具赛']"></vertical-selector>
				
			</view>
		<!-- 	<view class="left-door">

			</view>
			<view class="right-door">

			</view> -->

		<!-- </view> -->
	</view>
</template>

<script>
	import VerticalSelector from '@/pages/VerticalSelector/VerticalSelector.vue'
	export default {
		components:{
			VerticalSelector,
		},
		data() {
			return {
				show: false, // 控制显示与隐藏


			}
		},
		mounted() {
			this.show = true; // 页面加载完成后显示页面
		},
		methods: {

		}
	}
</script>

<style>
	.content{
		width: 90%;
		margin: auto;
		height: 100%;
		overflow: scroll;
	}
	.door {
		position: absolute;
		top: 0;
		left: 50%;
		width: 50vw;
		height: 50vh;
		background-color: #43ff9b;
		z-index: 1;
		animation: openDoor 1s forwards;
	}

	@keyframes openDoor {
		to {
			transform: scaleX(0);
		}
	}

	.left-door,
	.right-door {
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		background-color: #7777ff;
		z-index: 2;
	}

	.fade {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: rgb(182,201,252);
	}

	@keyframes slideLeft {
		to {
			transform: translateX(-70%);
		}
	}

	@keyframes slideRight {
		to {
			transform: translateX(70%);
		}
	}

	.left-door {
		left: 0;
		transform-origin: left;
		animation: slideLeft 1s forwards;
	}

	.right-door {
		right: 0;
		transform-origin: right;
		animation: slideRight 1s forwards;
	}

</style>